import React from "react";
import styles from "./index.module.less";
import defaultHead from "@images/sex0.webp";
import SvgIcon from "@components/SvgIcon";
import moment from "moment";
import { profile } from "@depjs/storage";
import { addPreviousLikeAction, cutPreviousLikeAction } from "@redux/actions02";
import { connect } from "react-redux";

const Step = (props) => {
    const { item, addPreviousLikeAction, cutPreviousLikeAction } = props;

    return (
        <div className={styles.step}>
            <p className={styles.date}>
                {moment(parseInt(item.key)).format("YYYY-MM-DD HH:mm:ss")}
            </p>
            <div className={styles.content}>
                <p className={styles.func_content}>{item.content}</p>
                <div className={styles.contributors}>
                    <p className={styles.contri_title}>
                        以下小伙伴为本次迭代做出了贡献：
                    </p>
                    <div className={styles.images}>
                        {item &&
                            item.avatarArr.map((_item, index) => {
                                return (
                                    <img
                                        key={index + "_"}
                                        src={
                                            _item
                                                ? require(`@images/head/${_item}`)
                                                : defaultHead
                                        }
                                        alt=""
                                        title="贡献人员"
                                    />
                                );
                            })}
                    </div>
                </div>
                <div className={styles.like}>
                    <p className={styles.like_text}>你喜欢本次更新的功能吗？</p>
                    <div
                        className={styles.like_icon}
                        onClick={() => {
                            item.likeList.includes(profile.userName)
                                ? cutPreviousLikeAction(item.key)
                                : addPreviousLikeAction(item.key);
                        }}
                    >
                        {/**点亮后的font为icon-dianzan01 */}
                        <SvgIcon
                            font={`${
                                item.likeList &&
                                item.likeList.includes(profile.userName)
                                    ? "icon-dianzan01"
                                    : "icon-dianzan"
                            }`}
                        />
                    </div>
                    <p className={styles.like_nums}>{item.likeNum}</p>
                </div>
            </div>
        </div>
    );
};

export default connect((state) => state, {
    addPreviousLikeAction,
    cutPreviousLikeAction,
})(Step);
